import React, { useState } from 'react';
import style from './index.module.css';
import { Button, Upload, Input, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must be smaller than 2MB!');
    return false;
  }
  return true;
};

const UploadButton = ({ loading }) => (
  <button
    style={{
      border: 0,
      background: 'none',
    }}
    type="button"
  >
    {loading ? <LoadingOutlined /> : <PlusOutlined />}
    <div
      style={{
        marginTop: 8,
      }}
    >
      Upload
    </div>
  </button>
);

export default function PackageManagement() {

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState("");

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      const url = URL.createObjectURL(info.file.originFileObj);
      setLoading(false);
      setImageUrl(url);
    } else if (info.file.status === 'error') {
      message.error('Upload failed.');
      setLoading(false);
    }
  };

  const handleImageError = () => {
    message.error('Failed to load image.');
    setImageUrl('');
  };

  return (
    <div className={style.container}>
      <div className={style.card}>
        <div className={style.cardContent}>
          <div className={style.firstLine}>
            <div className={style.firstLineLabel}>套餐名称：</div>
            <Input className={style.input}></Input>
            <div className={style.firstLineLabel}>套餐分类：</div>
            <Input className={style.input}></Input>
          </div>
          <div className={style.secondLine}>
            <div className={style.secondLineLabel}>套餐价格：</div>
            <Input className={style.input}></Input>
          </div>
          <div className={style.thirdLine}>
            <div className={style.thirdLineLabel}>套餐菜品：</div>
            <Button className={style.button}></Button>
          </div>
          <div className={style.fourthLine}>
            <div className={style.fourthLineLabel}>套餐图片：</div>
            <Upload
              name="avatar"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action={process.env.REACT_APP_UPLOAD_API_URL} // 使用环境变量
              beforeUpload={beforeUpload}
              onChange={handleChange}
            >
              {imageUrl ? (
                <img
                  src={imageUrl}
                  alt="avatar"
                  style={{ width: '100%' }}
                  onError={handleImageError}
                />
              ) : (
                <UploadButton loading={loading} />
              )}
            </Upload>
            <div className={style.imageUploadTips}>
              <div>图片大小超过2M</div>
              <div>仅能上传PNG JPEG JPG类型图片</div>
              <div>建议上传200*200或300*300尺寸的图片</div>
            </div>
          </div>
          <div className={style.fifthLine}>
            <div className={style.fifthLineLabel}>套餐描述：</div>
            <Input className={style.description}></Input>
          </div>
        </div>
      </div>
    </div>
  );
}